<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {doGet, doPost, doPut} from "@/util/request.js";
import {showMessage} from "@/util/message.js";


// 引入路由
const router = useRouter()
const route = useRoute()
//表单对象
const tranDetail = ref({})
//弹窗控制
const dialogVisible = ref(true)
//定义操作类型对象
const type = ref('add')
//提交表单对象
const loadTranForm = ref({})

const getTranDetail = () => {
  let tranId = route.params.id;
  doGet('/api/tran/detail/' + tranId,{}).then(res => {
    if (res.data.code === 200){
      tranDetail.value = res.data.data
    }
    else {
      showMessage('查询交易详情失败'+res.data.msg, 'error')
    }
  })
}
//提交表单数据
const submit = () => {
  //准备提交表单数据
  let params = {
    id: tranDetail.value.id,
    money: tranDetail.value.money,
    expectedDate: tranDetail.value.expectedDate,
    stage: tranDetail.value.stage,
    description: tranDetail.value.description,
    nextContactTime: tranDetail.value.nextContactTime
  }
  doPut('/api/tran/editTran', params).then(resp => {
    if (resp.data.code === 200) {
      showMessage('修改成功', 'success')
      //关闭当前窗口
      router.go(-1)
    } else {
      showMessage('修改失败', 'error', resp.data.msg)
    }
  })
}

const stageList = ref([])
//获取字典值列表
const loadDicValueList = (typeCode) => {
  doGet('/api/dic/value/list/' + typeCode, {}).then(resp => {
    if (resp.data.code === 200) {
      if (typeCode === 'stage') {
        stageList.value = resp.data.data
      }
    } else {
      showMessage('查询字典值列表失败', resp.data.msg, 'error')
    }
  })
}


onMounted(() => {
  loadDicValueList('stage')
  getTranDetail()
let tranId = route.params.tranId
  if (tranId){
    type.value='edit'
  }else {
    type.value='add'
  }
})

</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      width="700"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :align-center="true"
      :center="true"
      :show-close="false"
      title="详情编辑">

    <el-form ref="loadTranForm" :model="tranDetail" style="margin-left: 100px">
      <el-form-item label="编号: " v-if="type==='edit'" >
        {{ tranDetail.id }}
      </el-form-item>
      <el-form-item label="交易流水号:">
        <el-input v-model="tranDetail.tranNo" style="margin-left: 15px" readonly/>
<!--        {{tranDetail.tranNo}}-->
      </el-form-item>

      <el-form-item label="客户姓名: ">
        <el-input v-model="tranDetail.customerName" style="margin-left: 27px" readonly/>
      </el-form-item>

      <el-form-item label="交易金额: ">
        <el-input v-model="tranDetail.money" style="margin-left: 27px"/>
      </el-form-item>

      <el-form-item label="预计成交日期: ">
        <el-input v-model="tranDetail.expectedDate"/>
      </el-form-item>

      <el-form-item label="交易所处阶段: ">
        <el-select v-model="tranDetail.stage" placeholder="请选择交易阶段">
          <el-option v-for="item in stageList"
                     :key="item.id"
                     :label="item.typeValue"
                     :value="item.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="下次联系时间: ">
        <el-input v-model="tranDetail.nextContactTime"/>
      </el-form-item>

      <el-form-item label="交易描述: ">
        <el-input type="textarea" v-model="tranDetail.description" :rows="3" :maxlength="255" show-word-limit style="margin-left: 27px"/>
      </el-form-item>

      <el-form-item label="创建人: " v-if="type==='edit'">
        {{ tranDetail.createByName }}
      </el-form-item>

      <el-form-item label="创建时间: " v-if="type==='edit'">
        {{ tranDetail.createTime }}
      </el-form-item>

      <el-form-item label="编辑人: " v-if="type==='edit'">
        {{ tranDetail.editByName }}
      </el-form-item>

      <el-form-item label="编辑时间: " v-if="type==='edit'">
        {{ tranDetail.editTime }}
      </el-form-item>

    </el-form>
    <div style="margin-left: 500px">
      <el-button type="info" @click="router.back()">返回</el-button>
      <el-button type="primary" @click="submit(loadTranForm)">提交</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>

</style>